<template>
  <div class="page">
    <navigation>{{ $t('系统消息') }}</navigation>
    <div class="news">
      <div class="tabPanel">
        <ul>
          <li
            v-for="(item, index) in tabList"
            :key="item.text"
            :class="{ hit: item.active }"
            @click="switchTab(index)"
          >
            {{ $t(item.text) }}
          </li>
        </ul>
        <div class="panes">
          <components :is="tabList[activeIndex].component"></components>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import announcement from '@/components/partials/notice/Announcement'
import notification from '@/components/partials/notice/Notification'
import navigation from '@/components/Navigation.vue'
export default {
  components: { navigation, announcement, notification },
  data () {
    return {
      tabList: [
        { text: '公告', active: true, component: 'announcement' },
        { text: '通知', active: false, component: 'notification' }
      ],
      activeIndex: 0
    }
  },
  mounted () {
    const { type } = this.$route.params
    const arr = ['announcement', 'notification']
    const index = arr.indexOf(type)
    if (index > -1) {
      this.switchTab(index)
    }
  },
  methods: {
    switchTab (index) {
      this.tabList[this.activeIndex].active = false
      this.tabList[index].active = true
      this.activeIndex = index
    }
  }
}
</script>
<style scoped>
.news {
  width: auto;
  margin: 0;
  padding: 0;
}
.panes {
  padding: 0 3%;
  height: calc(100vh - 110px);
}
</style>
